<template>
  <!--菜单管理-->
  <div class="app-container">
    <el-tree
      :data="treeData"
      show-checkbox
      node-key="id"
      :props="defaultProps">

    </el-tree>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="level" label="级别"></el-table-column>
      <el-table-column prop="name" label="姓名" @click="eee"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
    <!--11-->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column type="expand">
        <template scope="props">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="level" label="级别"></el-table-column>
            <el-table-column prop="name" label="姓名" @click="eee"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column
        label="商品 ID"
        prop="id">
      </el-table-column>

    </el-table>
  </div>
</template>

<script>

  import {getRoleList} from "../../api/system";

  export default {
    components: {

    },
    data() {
      return {
        searchList: {
          search_LIKE_name: ''
        },
        list: null,
        total:0,
        defaultProps: {
          children: 'children',
          label: 'label'
        },
        treeData: [],
        tableData: [],
      }

    },
    filters: {
      statusFilter(status) {
        const statusMap = {
          published: 'success',
          draft: 'gray',
          deleted: 'danger'
        };
        return statusMap[status]
      }
    },
    created() {
      this.fetchData();
      console.log('菜单',this.routes);
      /**树结构***********************************************************************************************************/
      /*for(var i=2;i<this.routes.length-1;i++) {
          var obj = {};
          obj.label=this.routes[i].name;
          this.treeData.push(obj);
          if(this.routes[i].children) {
              obj.children=[];
              for(var j = 0; j<this.routes[i].children.length;j++) {
                  if(!this.routes[i].children[j].hidden) {
                      var childrenObj = {};
                      childrenObj.label = this.routes[i].children[j].name;
                      obj.children.push(childrenObj);
                  }
              }
          }
      }*/
      for(var i=2;i<this.routes.length-1;i++) {
        var obj = {};
        obj.label=this.routes[i].name;
        this.treeData.push(obj);
        dothis(this.routes[i]);

      }
      function dothis(data) {
        if(data.children) {
          obj.children=[];
          for(var j = 0; j<data.children.length;j++) {
            if(!data.children[j].hidden) {
              var childrenObj = {};
              childrenObj.label = data.children[j].name;
              obj.children.push(childrenObj);
            }
          }
        }
      }
      /**表格结构***********************************************************************************************************/
      for(var i=2;i<this.routes.length-1;i++) {
          var majorObj = {};
          majorObj.name = this.routes[i].name;
          majorObj.level = '一级菜单';
          this.tableData.push(majorObj);
          for(var j = 0;j<this.routes[i].children.length;j++) {
              var ppp = {};
              if(!this.routes[i].children[j].hidden) {
                  //console.log('可见的子元素：',this.routes[i].children[j]);
                  ppp.name =  '---------'+this.routes[i].children[j].name;
                  ppp.level = '二级菜单';
                  this.tableData.push(ppp);
                  if(this.routes[i].children[j].children) {
                    for(var k = 0;k<this.routes[i].children[j].children.length;k++) {
                      console.log('可见的三级',this.routes[i].children[j].children[k]);
                      var bbb = {};
                      if(!this.routes[i].children[j].children[k].hidden) {
                        bbb.name =  '--------------'+this.routes[i].children[j].children[k].name;
                        bbb.level = '三级菜单';
                        this.tableData.push(bbb);
                      }
                    }
                  }

                  /*for(var k = 0;k<this.routes[i].children[j].children.length;k++) {
                      if(this.routes[i].children[j].children[k]) {
                        var bbb = {};
                        if(this.routes[i].children[j].children[k].hidden) {
                          bbb.name =  '---------'+this.routes[i].children[j].children[k].name;
                          bbb.level = '三级菜单';
                          this.tableData.push(bbb);
                        }
                      }

                  }*/
              }
          }

      }
      console.log('this.tableData',this.tableData);
    },
    methods: {
      eee() {
          console.log('eeeeeeeeeeee');
      },
      fetchData(p=1) {
        this.listLoading = true;
        var params = this.searchList;
        params.page = p;
        getRoleList(params).then(data => {
          /*this.list = data.obj.rows
          this.total = parseInt(data.obj.total)
          this.listLoading = false*/
        })
      },
      searchRows() {
        this.fetchData()
      },
      emptyInputs() {
        this.searchList = {
          search_LIKE_name: ''
        };
        this.fetchData()
      },
      createRow() {
        this.create_visible = true;
        this.form_create = {}
      },
      submitCreateForm() {

      },
      editRow(row) {

      },
      submitEditForm() {

      },
      deleteRow(row) {

      },
      roleAssignment() {

      },
      changePage(p) {
        this.fetchData(p)
      }
    },
    computed: {
      routes() {
        const pageMap = {
          '/system/user': 'page/security/user/userList'
        }


        var menu = this.$store.state.menu


        return this.$router.options.routes
      }
    }
  }
</script>
